<template>
	<view class="pay-order">
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in payments" :key="index">
				<view class="uni-list-cell-navigate" @tap="payIndex = index">
					<view class="left">
						<image class="logo" :src="item.logo_image" mode=""></image>
						{{item.name}}
					</view>
					<view class="right">
						<image :src="payIndex == index ? '/static/icon/selected.png':'/static/icon/she.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom-btn" @tap="checkPayType()">
			确认支付
		</view>

		<view class="password-mask" v-if="showMask" @tap="showMask = false">
			<view class="password-container" @tap.stop="showMask=true">
				<view class="title mui-text-center">
					请输入支付密码
					<view><navigator url="../my/find-password?type=pay">忘记密码？</navigator></view>
				</view>
				<view class="input-container">
					<block v-for="(a, ai) in 6" :key="ai">
					
						<view class="item" v-if="ai < password.length"><text>*</text></view>
						<view class="item" v-else><text></text></view>
					</block>
				</view>	
				<view class="keyboard mui-row mui-text-center">
					<view class="item" @tap="inputPassword(1)">1</view>	
					<view class="item" @tap="inputPassword(2)">2</view>	
					<view class="item" @tap="inputPassword(3)">3</view>	
					<view class="item" @tap="inputPassword(4)">4</view>	
					<view class="item" @tap="inputPassword(5)">5</view>	
					<view class="item" @tap="inputPassword(6)">6</view>	
					<view class="item" @tap="inputPassword(7)">7</view>	
					<view class="item" @tap="inputPassword(8)">8</view>	
					<view class="item" @tap="inputPassword(9)">9</view>	
					<view class="item del" @tap.stop="showMask = false">关闭</view>	
					<view class="item" @tap="inputPassword(0)">0</view>	
					<view class="item del" @tap="delPassword()">删除</view>	
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	
	
	export default {
		components: {
			
		},
		data() {
			return {
				orderId : "",
				payIndex: null,
				type: "",
				payments:[],
				password: [],
				password_str: '',
				showMask:false,
				payId: '',
			};
		},
		onLoad(e) {
			this.orderId = e.id;
			this.type = e.type;
			this.getType();
		},
		methods: {
			getType: function(){
				
				var that = this;
				var url =  'order/getPaymentType';
				Request.send({
					url: url,
					data: {type: that.type},
					sCallback: function(res){
						that.payments = res.data;
					}
				})
			},

			//检查支付方式
			checkPayType: function(){
				var that = this;
				if(that.payIndex == null){
					Request.alert('请选择支付方式');return;
				}

				var item = this.payments[this.payIndex];
				
				// #ifdef H5
					if(this.payments[this.payIndex]['pay_type'] == 1 || this.payments[this.payIndex]['pay_type'] == 2) {
						Request.alert('H5暂不支持此方式支付，请使用APP完成支付');return;
					}
				// #endif
				
				// #ifdef MP-WEIXIN
					if(this.payments[this.payIndex]['pay_type'] == 1) {
						Request.alert('支付宝支付请在APP客户端中进行');return;
					}
				// #endif
				
				this.payId = item.id;

				//不是在线支付需要输入支付密码
				if(item.need_password == 1){
					that.showMask = true;
				} else {
					that.pay();
				}
			},

			pay: function(){
				var payType = this.type;
				var that = this;
				
				
				if(this.payments[this.payIndex]['pay_type'] == 2) {
					// #ifdef MP-WEIXIN
						//微信支付
						var url = 'weixinauth/payOrder';
						if(payType == 'recharge') {
							var url = 'weixinauth/payRechargeOrder';
						}
						var param = {
							url: url,
							data: {order_id: that.orderId},
							// checkCode: false,
							sCallback: function(res){
								// console.log(res);
								if(res.code == 200) {
								  var resData = res.data;
								  wx.requestPayment({
									'timeStamp': resData.timeStamp,
									'nonceStr': resData.nonceStr,
									'package': resData.package,
									'signType': resData.signType,
									'paySign': resData.paySign,
									success: function () {
									  wx.showToast({
										title: '支付成功'
									  })
								
									  if(payType == 'recharge') {
										var url =  '/pages/funds/index'
									  } else {
										var url = '/pages/order/detail?order_id='+that.orderId;
									  }
									  uni.redirectTo({
										url: url,
									  });
									},
									fail: function (res) {
									  console.log(res);
									}
								  });
								} else {
								  Request.alert(res.msg);
								}
							}
						}

						Request.send(param);
						return ;
					// #endif	 
				}
				
				
				var url =  'order/payOrder';
				Request.send({
					url: url,
					data: {
						"order_id": that.orderId,
						"payment_id": that.payId,
						"pay_password": that.password_str,
					},
					sCallback: function(res) {
						if(res.code == 200) {
							
							if(payType == 'recharge') {
								var url =  '/pages/funds/index'
							} else {
								var url = '/pages/order/detail?order_id='+that.orderId;
							}
							uni.redirectTo({
								url: url,
							});
						} else {
							that.password_str = '';
							that.password = [];
						}
					}
				})
			},

			inputPassword: function(num) {
				
				this.password.push(num);
				this.password_str = this.password.join('');
				if(this.password.length == 6){
					this.pay();
				}
			},
			delPassword: function(){
				this.password.splice(this.password.length-1,1);
			}
		}
	}
</script>

<style>
	.pay-order{
		font-size: 28upx;
	}
	
	.uni-list .left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.logo{
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}


	.right image{
		width: 60upx;
		height: 60upx;
	}

	.password-mask{
		position: fixed;
		z-index: 100;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
	}

	.password-mask .password-container{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
	}

	.password-mask .title{
		
		border-bottom: 1upx solid #eee;
		padding: 20upx 0;
		text-align: center;
	}

	.password-mask .title navigator{
		margin: 0;
		font-size: 20upx;
		color: #666;
		margin-top: 10upx;
	}

	
	.keyboard{
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
		border-top: 1upx solid #eee;
		/* border-left: 1upx solid #eee; */
		box-sizing: border-box;
	}

	.keyboard>view{
		width: 250upx;
		font-size: 48upx;
		line-height: 50px;
		display: flex;
		justify-content: center;
		border-right:1upx solid #eee;
		border-bottom: 1upx solid #eee;
		box-sizing: border-box;
	}
	
	.input-container{
		padding: 40upx 60upx;
		display: flex;
		justify-content: center;
	}
	
	.input-container .item{
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.input-container .item text{
		font-size: 48upx;
		border-bottom: 1upx solid #ddd;
		
		display: block;
		text-align: center;
		height: 60upx;
		width: 60upx;
	}

	.keyboard .del{
		font-size: 24upx;
	}
</style>
